<template>
  <el-dialog
    append-to-body
    :title="title"
    :visible.sync="dialogVisible"
    :width="name === 'blood' ? '350px' : '900px'"
    @close="close"
  >
    <template slot="title">
      <el-button v-print="print" icon="el-icon-printer" type="primary">
        打印
      </el-button>
    </template>
    <blood v-if="name === 'blood'" ref="ele" />
    <match v-if="name === 'match'" ref="ele" />
  </el-dialog>
</template>

<script>
  import { doPrints } from '@/api/blood'
  import Blood from './blood'
  import Match from './match'
  export default {
    components: {
      Blood,
      Match,
    },
    props: {
      name: {
        type: String,
        default() {
          return ''
        },
      },
    },
    data() {
      return {
        dialogVisible: false,
        title: '标签打印',
        bloods: [],
        print: {
          id: 'printArea', // 必要，打元素的id
          popTitle: '打印', // 打印配置页上方标题
          extraHead: '', //最上方的头部文字，附加在head标签上的额外标签,使用逗号分隔
          preview: '', // 是否启动预览模式，默认是false（开启预览模式，可以先预览后打印）
          previewTitle: '', // 打印预览的标题（开启预览模式后出现）,
          previewPrintBtnLabel: '', // 打印预览的标题的下方按钮文本，点击可进入打印（开启预览模式后出现）
          zIndex: '', // 预览的窗口的z-index，默认是 20002（此值要高一些，这涉及到预览模式是否显示在最上面）
          previewBeforeOpenCallback() {}, //预览窗口打开之前的callback（开启预览模式调用）
          previewOpenCallback() {}, // 预览窗口打开之后的callback（开启预览模式调用）
          beforeOpenCallback() {}, // 开启打印前的回调事件
          openCallback: () => {
            if (this.name === 'blood') {
              this.doPrints()
            }
          }, // 调用打印之后的回调事件
          closeCallback() {}, //关闭打印的回调事件（无法确定点击的是确认还是取消）
          url: '',
          standard: '',
          extraCss: '',
        },
      }
    },
    methods: {
      show(row) {
        this.dialogVisible = true
        if (this.name === 'blood') {
          this.bloods = row
        }
        setTimeout(() => {
          this.$refs.ele.show(row)
        }, 50)
      },

      async doPrints() {
        const { msg } = await doPrints({
          ids: this.bloods.map((val) => val.id),
        })
        this.$emit('getAll')
        this.$baseMessage(msg, 'success', 'vab-hey-message-success')
      },
      close() {
        this.bloods = []
        this.$emit('close')
      },
    },
  }
</script>

<style lang="scss" scoped></style>
